<template>
	<div class="choseTypeBoxMain" v-if="choseTypeBoxShow">
		<div class="choseTypeBox">
			<div class="topBoxRight el-icon-close" @click="closeEmit()"> </div>
			<div class="choseTypeBoxTitle">请选择项目类别</div>
			<div class="choseTypeBoxCenter">
				<button v-for="(item,index) in projectList" @click="clickItem(index,item)" class="choseTypeBoxCenterItem">
					{{item.chargeName}}
				</button>
			</div>
		</div>
		<div class="yiny"></div>
	</div>
</template>

<script>

	export default {
		props: {
			choseTypeBoxShow: {
				type: Boolean,
				default: false
			},
			projectList:{
				type:Array,
				default:[]
			}
		},
		data() {
			return {
			}
		},
		methods:{
			closeEmit(){
				this.$emit('closeEmit')
			},
			clickItem(index,item){
				this.$emit('typeBoxClick',item)
			}
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>


	.choseTypeBoxCenter {
		width: calc(100% - 2.625rem);
		margin-left: 1.3125rem;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		max-height: 80%;
		overflow-y: auto;
	}

	.choseTypeBoxTitle {
		font-size: 3.2vw;
		text-align: center;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
		margin-top: 3.6875rem;
		margin-bottom: 1rem;
	}
	
	.choseTypeBoxCenterItem{
		width: 30%;
		font-size: 2.5vw;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
		height: 5rem;
		background: #FFFFFF;
		box-shadow: 0px 0.0625rem 1.6875rem 0px rgba(42, 103, 177, 0.09);
		border-radius: 0.5rem;
		margin: 0.75rem;
		border: none;
		
	}
	.choseTypeBoxCenterItem:active{
		background-color: #46C349;
		color: #FFFFFF;
	}

	@media (min-height: 0px) and (max-height: 1910px) {
		.choseTypeBox {
			width: calc(100% - 14.75rem);
			height: calc(100% - 14rem);
			background: #EAF4F9;
			box-shadow: 0px 1px 1.6875rem 0px rgba(42, 103, 177, 0.09);
			border-radius: 0.5rem;
			position: fixed;
			top: 7rem;
			left: 7.375rem;
			background: #EAF4F9;
			border-radius: 0.5rem;
			z-index: 3;
		}
		
		.topBoxRight {
			width: 3.125rem;
			height: 3.125rem;
			background: #57A8FF;
			border-radius: 6px;
			position: absolute;
			right: 0px;
			top: 0px;
			color: #FFF0FF;
			font-size: 2.7vw;
		}
	}

	@media (min-height: 1919px) {
		.choseTypeBox {
			width: calc(100% - 14.75rem);
			height: calc(100% - 14rem - 1000px);
			background: #EAF4F9;
			box-shadow: 0px 1px 1.6875rem 0px rgba(42, 103, 177, 0.09);
			border-radius: 0.5rem;
			position: fixed;
			top: calc(7rem + 1000px);
			left: 7.375rem;
			background: #EAF4F9;
			border-radius: 0.5rem;
			z-index: 3;
		}
		
		.topBoxRight {
			width: 50px;
			height: 50px;
			background: #57A8FF;
			border-radius: 6px;
			position: absolute;
			right: 0px;
			top: 0px;
			color: #FFF0FF;
			font-size: 4.7vw;
		}

	}
</style>
